<template>
  <div>
    
    <div class="TJ_box paddingB10">
      <div class="marginB15">
        <span class="f_16 f_bold" style="margin-right:38px;">要求优先权声明</span>
        <Button
          type="primary"
          size="small"
          class="marginR10"
          :disabled="priority_declar_list.length==8"
          @click="xZyy"
        >+ 新增</Button>
        <span>
          <span class="f_bold">{{priority_declar_list.length}}</span> / 8
        </span>
      </div>

      <template v-for="(val,i) in priority_declar_list">
        <div class="cotLi">
          <div class=" f_bold title">
            优先权声明 <span class="cBlue f_bold">{{i+1}}</span>
            <Icon
              type="md-close-circle"
              class="cCCC pointer pullRight relative"
              style="top:5px;right:-7px;"
              size="18"
              @click="fDel(i)"
            />
          </div>
          <div class="marginB10">
            <span class="inlineBlock textRight paddingR10 zuoTt" >原代理机构：</span>
            <Select 
              class="youTt" 
              size="large" 
              v-model="val['priority_declar_name']" 
              :ref="'priority_declar_name'+i"
              @on-change="nationality_Fun(i)" 
              placeholder="请选择原代理机构注册国籍"
            >
              <Option v-for="(val,i) in countryList" :value="val.name" :key="i">{{val.name}}</Option>
            </Select>
          </div>
          <div class="marginB10">
            <span class="inlineBlock textRight paddingR10 zuoTt" >在先申请日：</span>
            <DatePicker 
              v-model="val['priority_declar_date']"
              :ref="'priority_declar_date'+i"
              format="yyyy-MM-dd"
              :options="optMax"
              type="date" 
              placeholder="请选择日期" 
              size="large"
              class="youTt"
              :editable="false"
              :clearable="false"
              @on-change="ondEndJ(val)"
            ></DatePicker>
          </div>
          <div class="marginB10">
            <span class="inlineBlock textRight paddingR10 zuoTt" >在先申请号：</span>
            <Input
              placeholder="请输入在申请号"
              size="large"
              class="youTt"
              v-model="val['priority_declar_number']"
              :ref="'priority_declar_number'+i"
              clearable
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>


<style lang="less" scoped>
.cotLi {
  width: 430px;
  border: 1px solid #eee;
  float: left;
  padding:0 15px;
  margin: 0 20px 20px 0;
  background-color: #fafafa;
  border-radius: 5px;
  .title{
    margin:0 -15px 10px -15px ;
    border-bottom: 1px solid #eee;
    line-height: 2;
    padding: 0 15px;;
  }
  .zuoTt{width: 105px;}
  .youTt{
    width: 270px;
  }
}
.cotLi:hover{
	box-shadow: 0 1px 6px rgba(0,0,0,0.08)
}
</style>


<script>
export default {
  name: "pDList",
  data() {
    let data = {
      //优先权
      priority_declar_list: [
        // {
        //   priority_declar_name: "", //国籍 -  老数据为代理机构名称
        //   priority_declar_code:"", //国籍代码 - 老数据为空数据
        //   priority_declar_date: "",//在先申请日
        //   priority_declar_number: ""//在先申请号
        // }
      ]
    };
    let tool = {
      countryList:$app.getLocal('root_countryList'),//国家列表 读本地的存储，这个东西 N年不会变一次
      optMax: {
        disabledDate(date) {
          let out = date && date.valueOf() > Date.now();
          return out;
        }
      }
    };
    return Object.assign(data, tool);
  },
  mounted() {},
  methods: {
    //优先权新增加
    xZyy() {
      let { priority_declar_list } = this;
      this.priority_declar_list = [
        ...priority_declar_list,
        {
          priority_declar_name: "", //国籍 -  老数据为代理机构名称
          priority_declar_code:"", //国籍代码 - 老数据为空数据
          priority_declar_date: "",//在先申请日
          priority_declar_number: ""//在先申请号
        }
      ];
    },
    fDel(num) {
      let { priority_declar_list } = this;
      this.priority_declar_list = $app.arrayDelOne(priority_declar_list, num);
    },
    //国籍切换
    nationality_Fun(i){
      let {
        priority_declar_list,
        countryList
      } = this;

      let name=this.priority_declar_list[i].priority_declar_name;
      let code='';
      for(let r=0;r<countryList.length;r++){
        if(countryList[r].name==name){
          code=countryList[r].code;
          break;
        }
      }
      this.priority_declar_list[i].priority_declar_code=code;//国籍代码赋值

    },
    // 格式化时间戳 再赋值
    ondEndJ(val){
      let {
        priority_declar_date
      }=val;
      if(typeof priority_declar_date === 'object'){
        let date=$app.formatTime(2, ((priority_declar_date).valueOf()/1000) );
        val.priority_declar_date=date;
      }
      
      
    },


  }
};
</script>

